<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>字段类型列表 | d2-crud-plus</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/d2-crud-plus/icon-only.png">
    <link rel="manifest" href="/d2-crud-plus/manifest.json">
    <link rel="apple-touch-icon" href="/d2-crud-plus/icons/apple-touch-icon-152x152.png">
    <link rel="mask-icon" href="/d2-crud-plus/icons/safari-pinned-tab.svg" color="#3eaf7c">
    <meta name="description" content="d2-crud-plus doc">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
    <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="/d2-crud-plus/assets/css/0.styles.04fdeb33.css" as="style"><link rel="preload" href="/d2-crud-plus/assets/js/app.cf559687.js" as="script"><link rel="preload" href="/d2-crud-plus/assets/js/2.40e3d83c.js" as="script"><link rel="preload" href="/d2-crud-plus/assets/js/7.20165752.js" as="script"><link rel="preload" href="/d2-crud-plus/assets/js/99.74bab3f4.js" as="script"><link rel="prefetch" href="/d2-crud-plus/assets/js/10.df64ceb4.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/100.1b960036.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/101.0e6b7c65.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/102.60335619.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/11.d9cc7359.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/12.1fe853d9.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/13.beccd8a2.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/14.a22b7450.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/15.bfbc8e57.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/16.829da345.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/17.320c2a84.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/18.1ae2555c.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/19.dd1cfb7c.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/20.9f88070e.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/21.b4e311e8.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/22.508bfd88.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/23.d99910ba.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/24.3aac1d86.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/25.7f84d66c.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/26.010188d3.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/27.7ffcde1a.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/28.e5718534.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/29.a664aead.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/3.020e8c98.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/30.b5af54a5.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/31.3ce7cf81.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/32.74db3cbf.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/33.4afafef0.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/34.802ed380.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/35.829671b1.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/36.d62ff643.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/37.56355919.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/38.ef3567a6.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/39.f5bd440b.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/4.c9f444e5.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/40.097677b2.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/41.a1bdd4d7.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/42.d7c95839.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/43.ff1defe3.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/44.d08c49cd.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/45.15500c6e.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/46.49432e0a.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/47.4c86a170.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/48.9fb26f3b.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/49.2f1d3b4c.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/5.0c166f17.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/50.8adcf1fc.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/51.9debc188.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/52.b337fe05.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/53.1b4c4595.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/54.60ad5592.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/55.1ead7a60.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/56.4b4068b5.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/57.39b9a334.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/58.e342a69f.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/59.9286ee5c.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/6.dc3cf8b6.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/60.fca56e66.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/61.e53daf76.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/62.afa730c3.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/63.515344c7.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/64.5ea21d7e.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/65.5736928f.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/66.354c4f97.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/67.e458985d.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/68.9cf2e48e.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/69.afff9087.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/70.5f510366.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/71.08e285c9.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/72.fbdbf96d.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/73.4c7255c5.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/74.dbca5940.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/75.3cdd0828.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/76.cdad6b31.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/77.f79386ae.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/78.885784bf.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/79.90e30120.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/8.ce580690.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/80.2b6522e0.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/81.ab19ef97.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/82.cb46f8f4.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/83.67a48600.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/84.224a00c3.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/85.e4002b19.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/86.e1acfe7c.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/87.263718a8.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/88.4548fddc.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/89.dcd81e26.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/9.18394d2c.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/90.70193895.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/91.60784f38.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/92.82037907.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/93.f7bbaf29.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/94.bfb96693.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/95.27670bd5.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/96.068d6ad1.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/97.d82da56e.js"><link rel="prefetch" href="/d2-crud-plus/assets/js/98.20649291.js">
    <link rel="stylesheet" href="/d2-crud-plus/assets/css/0.styles.04fdeb33.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/d2-crud-plus/" class="home-link router-link-active"><!----> <span class="site-name">d2-crud-plus</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/d2-crud-plus/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><span class="title">更多</span> <span class="arrow down"></span></button> <button type="button" aria-label="更多" class="mobile-dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          核心
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/d2-crud-plus/d2-crud-x/" class="nav-link">
  D2-CRUD-X
</a></li></ul></li><li class="dropdown-item"><h4>
          周边项目
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://gitee.com/greper/d2-crud-plus" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee镜像
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/greper/d2-crud-plus-with-d2admin-starter" target="_blank" rel="noopener noreferrer" class="nav-link external">
  精简启动项目
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/greper/d2-crud-plus-with-d2admin-starter" target="_blank" rel="noopener noreferrer" class="nav-link external">
  精简启动项目[gitee]
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/greper/d2-crud-plus-with-d2admin-starter/tree/permission" target="_blank" rel="noopener noreferrer" class="nav-link external">
  精简启动项目-带权限
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/greper/d2-crud-plus-with-d2admin-starter/tree/permission" target="_blank" rel="noopener noreferrer" class="nav-link external">
  精简启动项目-带权限[gitee]
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/greper/d2-crud-plus-server" target="_blank" rel="noopener noreferrer" class="nav-link external">
  配套java后端
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/greper/d2-crud-plus-server" target="_blank" rel="noopener noreferrer" class="nav-link external">
  配套java后端[gitee]
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          附加
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/d2-crud-plus/guide/permission.html" class="nav-link">
  权限管理
</a></li><li class="dropdown-subitem"><a href="/d2-crud-plus/guide/generate.html" class="nav-link">
  代码生成
</a></li></ul></li><li class="dropdown-item"><h4>
          衍生项目
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://cloud.battcn.com/#/index" target="_blank" rel="noopener noreferrer" class="nav-link external">
  后台获取配置的CRUD
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          友情链接
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://gitee.com/docmirror/dev-sidecar" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github加速工具
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/greper/d2-crud-plus" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/d2-crud-plus/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><span class="title">更多</span> <span class="arrow down"></span></button> <button type="button" aria-label="更多" class="mobile-dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          核心
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/d2-crud-plus/d2-crud-x/" class="nav-link">
  D2-CRUD-X
</a></li></ul></li><li class="dropdown-item"><h4>
          周边项目
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://gitee.com/greper/d2-crud-plus" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee镜像
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/greper/d2-crud-plus-with-d2admin-starter" target="_blank" rel="noopener noreferrer" class="nav-link external">
  精简启动项目
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/greper/d2-crud-plus-with-d2admin-starter" target="_blank" rel="noopener noreferrer" class="nav-link external">
  精简启动项目[gitee]
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/greper/d2-crud-plus-with-d2admin-starter/tree/permission" target="_blank" rel="noopener noreferrer" class="nav-link external">
  精简启动项目-带权限
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/greper/d2-crud-plus-with-d2admin-starter/tree/permission" target="_blank" rel="noopener noreferrer" class="nav-link external">
  精简启动项目-带权限[gitee]
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/greper/d2-crud-plus-server" target="_blank" rel="noopener noreferrer" class="nav-link external">
  配套java后端
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/greper/d2-crud-plus-server" target="_blank" rel="noopener noreferrer" class="nav-link external">
  配套java后端[gitee]
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          附加
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/d2-crud-plus/guide/permission.html" class="nav-link">
  权限管理
</a></li><li class="dropdown-subitem"><a href="/d2-crud-plus/guide/generate.html" class="nav-link">
  代码生成
</a></li></ul></li><li class="dropdown-item"><h4>
          衍生项目
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://cloud.battcn.com/#/index" target="_blank" rel="noopener noreferrer" class="nav-link external">
  后台获取配置的CRUD
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          友情链接
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://gitee.com/docmirror/dev-sidecar" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github加速工具
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/greper/d2-crud-plus" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div style="padding:20px 30px  0px 30px;"><a target="_blank" href="https://www.aliyun.com/minisite/goods?userCode=qya11txb" style="width:100%"><img src="https://img.alicdn.com/tfs/TB1qnR3R1L2gK0jSZFmXXc7iXXa-440-240.jpg" style="width:100%"></a></div> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/d2-crud-plus/guide/" aria-current="page" class="sidebar-link">介绍</a></li><li><a href="/d2-crud-plus/guide/quickstart.html" class="sidebar-link">快速上手</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/d2-crud-plus/guide/mixins.html" class="sidebar-link">核心逻辑</a></li><li><a href="/d2-crud-plus/guide/structure.html" class="sidebar-link">数据结构</a></li><li><a href="/d2-crud-plus/guide/column-type.html" class="sidebar-link">字段类型</a></li><li><a href="/d2-crud-plus/guide/types.html" aria-current="page" class="active sidebar-link">字段类型列表</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#文本输入框" class="sidebar-link">文本输入框</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#element包装组件" class="sidebar-link">Element包装组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#选择框" class="sidebar-link">选择框</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#级联" class="sidebar-link">级联</a></li></ul></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#扩展组件" class="sidebar-link">扩展组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#国际电话" class="sidebar-link">国际电话</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#省市区选择" class="sidebar-link">省市区选择</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#树形选择" class="sidebar-link">树形选择</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#文件上传-裁剪上传" class="sidebar-link">文件上传，裁剪上传</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#图标选择器" class="sidebar-link">图标选择器</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#富文本框" class="sidebar-link">富文本框</a></li></ul></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#elementui组件" class="sidebar-link">ElementUI组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#日期时间选择" class="sidebar-link">日期时间选择</a></li></ul></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#其他el组件" class="sidebar-link">其他el组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#数字输入" class="sidebar-link">数字输入</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#开关" class="sidebar-link">开关</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#滑动条" class="sidebar-link">滑动条</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#评分" class="sidebar-link">评分</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#颜色" class="sidebar-link">颜色</a></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#穿梭框" class="sidebar-link">穿梭框</a></li></ul></li><li class="sidebar-sub-header"><a href="/d2-crud-plus/guide/types.html#slot自定义快捷字段类型" class="sidebar-link">slot自定义快捷字段类型</a></li></ul></li><li><a href="/d2-crud-plus/guide/custom-type.html" class="sidebar-link">自定义字段类型</a></li><li><a href="/d2-crud-plus/guide/component.html" class="sidebar-link">组件配置</a></li><li><a href="/d2-crud-plus/guide/slot.html" class="sidebar-link">slot自定义</a></li><li><a href="/d2-crud-plus/guide/extends.html" class="sidebar-link">自定义扩展</a></li><li><a href="/d2-crud-plus/guide/dict.html" class="sidebar-link">数据字典</a></li><li><a href="/d2-crud-plus/guide/nest-data.html" class="sidebar-link">多级数据</a></li><li><a href="/d2-crud-plus/guide/flat-data.html" class="sidebar-link">数据扁平化</a></li><li><a href="/d2-crud-plus/guide/data-export.html" class="sidebar-link">数据导出</a></li><li><a href="/d2-crud-plus/guide/line-edit.html" class="sidebar-link">行编辑</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/d2-crud-plus/guide/options.html" class="sidebar-link">crud配置项</a></li><li><a href="/d2-crud-plus/guide/expose.html" class="sidebar-link">暴露的方法</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>扩展</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>组件</span> <span class="arrow right"></span></p> <!----></section></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>附加功能</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/d2-crud-plus/guide/permission.html" class="sidebar-link">权限管理</a></li><li><a href="/d2-crud-plus/guide/generate.html" class="sidebar-link">代码生成</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>更多帮助</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/d2-crud-plus/guide/upgrade.html" class="sidebar-link">版本升级</a></li><li><a href="/d2-crud-plus/guide/breakingchange.html" class="sidebar-link">破坏性变更</a></li><li><a href="/d2-crud-plus/guide/upgradechange.html" class="sidebar-link">版本变更说明</a></li><li><a href="/d2-crud-plus/guide/questions.html" class="sidebar-link">常见问题</a></li><li><a href="/d2-crud-plus/guide/contact.html" class="sidebar-link">联系作者</a></li><li><a href="/d2-crud-plus/guide/donate.html" class="sidebar-link">捐赠</a></li><li><a href="/d2-crud-plus/guide/users.html" class="sidebar-link">他们在用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>ChangeLog</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/d2-crud-plus/guide/changelogs/packages/d2-crud-x/CHANGELOG.html" class="sidebar-link">d2-crud-x</a></li><li><a href="/d2-crud-plus/guide/changelogs/packages/d2-crud-plus/CHANGELOG.html" class="sidebar-link">d2-crud-plus</a></li><li><a href="/d2-crud-plus/guide/changelogs/packages/d2-crud-plus-extends/CHANGELOG.html" class="sidebar-link">d2-crud-plus-extends</a></li><li><a href="/d2-crud-plus/guide/changelogs/packages/d2-crud-plus-example/CHANGELOG.html" class="sidebar-link">d2-crud-plus-example</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="字段类型列表"><a href="#字段类型列表" class="header-anchor">#</a> 字段类型列表</h1> <p>此处列出目前支持的全部字段类型</p> <h2 id="文本输入框"><a href="#文本输入框" class="header-anchor">#</a> 文本输入框</h2> <p>不配置type，默认即是文本输入框</p> <h2 id="element包装组件"><a href="#element包装组件" class="header-anchor">#</a> Element包装组件</h2> <p>以下字段类型的组件包装过ElementUI的某个组件
被包装的element组件的参数一般通过component.props.elProps来配置</p> <h3 id="选择框"><a href="#选择框" class="header-anchor">#</a> 选择框</h3> <ul><li>字段类型
select | radio | checkbox</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  select<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    search<span class="token punctuation">:</span> <span class="token punctuation">{</span> disabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> clearable<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'dict-select'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> elProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> disabled<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> readonly<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'values-format'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  radio<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    search<span class="token punctuation">:</span> <span class="token punctuation">{</span> disabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'dict-select'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> clearable<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'dict-radio'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> elProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> disabled<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> readonly<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'values-format'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  checkbox<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    search<span class="token punctuation">:</span> <span class="token punctuation">{</span> disabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'dict-select'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> clearable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> multiple<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'dict-checkbox'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> elProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> disabled<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> readonly<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'values-format'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">'dict-switch'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    search<span class="token punctuation">:</span> <span class="token punctuation">{</span> disabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'dict-switch'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> clearable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> multiple<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'dict-switch'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> elProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> disabled<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> readonly<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'values-format'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> elProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> disabled<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> readonly<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>相关组件参数：
<ul><li><a href="./components/dict-select">dict-select</a></li> <li><a href="./components/dict-radio">dict-radio</a></li> <li><a href="./components/dict-checkbox">dict-checkbox</a></li> <li><a href="./components/values-format">values-format</a></li></ul></li> <li>示例：
<ul><li><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/select" target="_blank" rel="noopener noreferrer">http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/select<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li> <li>配置示例说明：
<ul><li>表单组件dict-select 内部封装了el-select：<a href="https://element.eleme.cn/#/zh-CN/component/select" target="_blank" rel="noopener noreferrer">el-select<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>el-select的参数需要配置在component.props.elProps下</li></ul></li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">let</span> column<span class="token operator">=</span><span class="token punctuation">{</span>
   type<span class="token punctuation">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span>
   form<span class="token punctuation">:</span> <span class="token punctuation">{</span>
     component<span class="token punctuation">:</span> <span class="token punctuation">{</span> 
       name<span class="token punctuation">:</span><span class="token string">'dict-select'</span><span class="token punctuation">,</span>
       props<span class="token punctuation">:</span> <span class="token punctuation">{</span>
         separator<span class="token punctuation">:</span> <span class="token string">','</span> <span class="token punctuation">,</span><span class="token comment">//多选时，value的分隔符</span>
         elProps<span class="token punctuation">:</span><span class="token punctuation">{</span> <span class="token comment">// el-select的配置项，https://element.eleme.cn/#/zh-CN/component/select</span>
           filterable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
           multiple<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
           clearable<span class="token punctuation">:</span> <span class="token boolean">true</span>
         <span class="token punctuation">}</span>            
       <span class="token punctuation">}</span>    
     <span class="token punctuation">}</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   component<span class="token punctuation">:</span><span class="token punctuation">{</span>
     name<span class="token punctuation">:</span><span class="token string">'values-format'</span><span class="token punctuation">,</span>
     props<span class="token punctuation">:</span><span class="token punctuation">{</span>
       multiple<span class="token punctuation">:</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//默认支持多选</span>
       separator<span class="token punctuation">:</span> <span class="token string">','</span> <span class="token punctuation">,</span><span class="token comment">//多选时，value的分隔符</span>
     <span class="token punctuation">}</span>   
   <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre></div><h3 id="级联"><a href="#级联" class="header-anchor">#</a> 级联</h3> <ul><li>类型<br>
type = cascader （单选）| cascader-multi（多选）</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  cascader<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    search<span class="token punctuation">:</span> <span class="token punctuation">{</span> disabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token comment">/* 修复重置表单时返回[null]的bug */</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> elProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> clearable<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'cascade-select'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> elProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> filterable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> disabled<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'cascade-format'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> multiple<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">'cascader-multi'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    search<span class="token punctuation">:</span> <span class="token punctuation">{</span> disabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> elProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> clearable<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'cascade-select'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> elProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> filterable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> disabled<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> multiple<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> collapseTags<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'cascade-format'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> multiple<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>相关组件：
<ul><li><a href="./components/dict-select">cascader-select</a></li> <li><a href="./components/values-format">cascader-format</a></li></ul></li> <li>示例：
<ul><li><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/select" target="_blank" rel="noopener noreferrer">http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/select<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <h2 id="扩展组件"><a href="#扩展组件" class="header-anchor">#</a> 扩展组件</h2> <h3 id="国际电话"><a href="#国际电话" class="header-anchor">#</a> 国际电话</h3> <ul><li>类型
type=phoneNumber</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  phoneNumber<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      component<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        name<span class="token punctuation">:</span> <span class="token string">'el-phone-number-input'</span><span class="token punctuation">,</span>
        props<span class="token punctuation">:</span> <span class="token punctuation">{</span>
          size<span class="token punctuation">:</span> <span class="token string">'sm'</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">formatter</span> <span class="token punctuation">(</span><span class="token parameter">row<span class="token punctuation">,</span> column<span class="token punctuation">,</span> value<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">let</span> ret <span class="token operator">=</span> <span class="token string">''</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">.</span>callingCode <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          ret <span class="token operator">+=</span> <span class="token string">'(+'</span> <span class="token operator">+</span> value<span class="token punctuation">.</span>callingCode <span class="token operator">+</span> <span class="token string">')'</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">.</span>countryCode <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          ret <span class="token operator">+=</span> <span class="token string">'('</span> <span class="token operator">+</span> value<span class="token punctuation">.</span>countryCode <span class="token operator">+</span> <span class="token string">')'</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">.</span>phoneNumber <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          ret <span class="token operator">+=</span> value<span class="token punctuation">.</span>phoneNumber
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> ret
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>相关组件：
<ul><li><a href="https://github.com/greper/el-phone-number-input" target="_blank" rel="noopener noreferrer">el-phone-number-input<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li> <li>示例：
<ul><li><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/phone" target="_blank" rel="noopener noreferrer">http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/phone<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <h3 id="省市区选择"><a href="#省市区选择" class="header-anchor">#</a> 省市区选择</h3> <ul><li>类型名称<br>
type = area-selector （级联选择） | area-multi-selector （级联多选） | area-tree-selector （树形选择）</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> pcaData <span class="token keyword">from</span> <span class="token string">'./area-data'</span>
<span class="token keyword">const</span> cacheKey <span class="token operator">=</span> <span class="token string">'__default_area_tree_dict_data__'</span>
<span class="token keyword">function</span> <span class="token function">getData</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> pcaData
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token string">'area-selector'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    search<span class="token punctuation">:</span> <span class="token punctuation">{</span> disabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token comment">/* 修复重置表单时返回[null]的bug */</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> elProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> clearable<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'cascade-select'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> elProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> filterable<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'cascade-format'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    dict<span class="token punctuation">:</span> <span class="token punctuation">{</span> url<span class="token punctuation">:</span> cacheKey<span class="token punctuation">,</span> getData<span class="token punctuation">:</span> getData<span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token string">'code'</span><span class="token punctuation">,</span> isTree<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">'area-multi-selector'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    search<span class="token punctuation">:</span> <span class="token punctuation">{</span> disabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token comment">/* 修复重置表单时返回[null]的bug */</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> elProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> clearable<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'cascade-select'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> elProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> filterable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> multiple<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'collapse-tags'</span><span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'cascade-format'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> multiple<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    dict<span class="token punctuation">:</span> <span class="token punctuation">{</span> url<span class="token punctuation">:</span> cacheKey<span class="token punctuation">,</span> getData<span class="token punctuation">:</span> getData<span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token string">'code'</span><span class="token punctuation">,</span> isTree<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">'area-tree-selector'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'d2p-tree-selector'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'values-format'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    dict<span class="token punctuation">:</span> <span class="token punctuation">{</span> url<span class="token punctuation">:</span> cacheKey<span class="token punctuation">,</span> getData<span class="token punctuation">:</span> getData<span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token string">'code'</span><span class="token punctuation">,</span> isTree<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>相关组件：
<ul><li><a href="/d2-crud-plus/guide/components/cascade-select.html">cascade-select</a></li> <li><a href="/d2-crud-plus/guide/components/cascade-format.html">cascade-format</a></li></ul></li> <li>示例地址：
<ul><li><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/area" target="_blank" rel="noopener noreferrer">http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/area<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <h3 id="树形选择"><a href="#树形选择" class="header-anchor">#</a> 树形选择</h3> <ul><li>类型名称<br>
type = tree-selector</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token string">'tree-selector'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'d2p-tree-selector'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'values-format'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><p>相关组件：</p> <ul><li><a href="/d2-crud-plus/guide/extends/tree-selector.html">d2p-tree-selector安装</a></li> <li><a href="/d2-crud-plus/guide/components/d2p-tree-selector.html">d2p-tree-selector参数</a></li></ul></li> <li><p>示例：</p> <ul><li><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/area" target="_blank" rel="noopener noreferrer">http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/area<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <h3 id="文件上传-裁剪上传"><a href="#文件上传-裁剪上传" class="header-anchor">#</a> 文件上传，裁剪上传</h3> <ul><li>类型
<ul><li>file-uploader（文件上传） | image-uploader（图片上传） | avatar-uploader（头像上传，单图片）</li> <li>avatar-cropper (头像裁剪上传)</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token string">'image-uploader'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'d2p-file-uploader'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> elProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> listType<span class="token punctuation">:</span> <span class="token string">'picture-card'</span><span class="token punctuation">,</span> accept<span class="token punctuation">:</span> <span class="token string">'.png,.jpeg,.jpg,.ico,.bmp,.gif'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'d2p-images-format'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    view<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      component<span class="token punctuation">:</span> <span class="token punctuation">{</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">100</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    align<span class="token punctuation">:</span> <span class="token string">'center'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">'avatar-uploader'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'d2p-file-uploader'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> elProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> limit<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> listType<span class="token punctuation">:</span> <span class="token string">'avatar'</span><span class="token punctuation">,</span> accept<span class="token punctuation">:</span> <span class="token string">'.png,.jpeg,.jpg,.ico,.bmp,.gif'</span><span class="token punctuation">,</span> showFileList<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'d2p-images-format'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    view<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      component<span class="token punctuation">:</span> <span class="token punctuation">{</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">100</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    align<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
    <span class="token function">valueResolve</span> <span class="token punctuation">(</span><span class="token parameter">row<span class="token punctuation">,</span> col</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> value <span class="token operator">=</span> row<span class="token punctuation">[</span>col<span class="token punctuation">.</span>key<span class="token punctuation">]</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">!=</span> <span class="token keyword">null</span> <span class="token operator">&amp;&amp;</span> value <span class="token keyword">instanceof</span> <span class="token class-name">Array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">.</span>length <span class="token operator">&gt;=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          row<span class="token punctuation">[</span>col<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> value<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>url
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
          row<span class="token punctuation">[</span>col<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">null</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">'file-uploader'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'d2p-file-uploader'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> elProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> listType<span class="token punctuation">:</span> <span class="token string">'text'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'d2p-files-format'</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">'avatar-cropper'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'d2p-cropper-uploader'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> accept<span class="token punctuation">:</span> <span class="token string">'.png,.jpeg,.jpg,.ico,.bmp,.gif'</span><span class="token punctuation">,</span> cropper<span class="token punctuation">:</span> <span class="token punctuation">{</span> viewMode<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'d2p-images-format'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    align<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
    view<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      component<span class="token punctuation">:</span> <span class="token punctuation">{</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">100</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><p>示例：</p> <ul><li><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/uploader" target="_blank" rel="noopener noreferrer">http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/uploader<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/cropper" target="_blank" rel="noopener noreferrer">http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/cropper<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li> <li><p>相关组件文档：</p> <ul><li><a href="/d2-crud-plus/guide/extends/uploader.html">D2pUploader安装</a></li> <li><a href="/d2-crud-plus/guide/extends/file-uploader.html">D2pFileUploader安装</a></li> <li><a href="/d2-crud-plus/guide/extends/file-uploader.html">D2pCropperUploader安装</a></li> <li><a href="/d2-crud-plus/guide/components/d2p-file-uploader.html">d2p-file-uploader</a></li> <li><a href="/d2-crud-plus/guide/components/d2p-cropper-uploader.html">d2p-cropper-uploader</a></li> <li><a href="/d2-crud-plus/guide/components/d2p-cropper.html">d2p-cropper</a></li> <li><a href="/d2-crud-plus/guide/components/d2p-images-format.html">d2p-images-format</a></li> <li><a href="/d2-crud-plus/guide/components/d2p-files-format.html">d2p-files-format</a></li></ul></li></ul> <h3 id="图标选择器"><a href="#图标选择器" class="header-anchor">#</a> 图标选择器</h3> <ul><li>类型名称<br>
type = icon-selector</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token string">'icon-selector'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'d2p-icon-select'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'d2p-icon'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    align<span class="token punctuation">:</span> <span class="token string">'center'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><p>相关组件：</p> <ul><li><a href="/d2-crud-plus/guide/extends/icon-selector.html">D2pIconSelector安装</a></li> <li><a href="/d2-crud-plus/guide/components/d2p-icon-select.html">d2p-icon-select</a></li> <li><a href="/d2-crud-plus/guide/components/d2p-icon.html">d2p-icon</a></li></ul></li> <li><p>示例：</p> <ul><li><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/icon" target="_blank" rel="noopener noreferrer">http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/icon<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <h3 id="富文本框"><a href="#富文本框" class="header-anchor">#</a> 富文本框</h3> <ul><li>类型
<ul><li>type= editor-quill</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token string">'editor-quill'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'d2p-quill'</span><span class="token punctuation">,</span> span<span class="token punctuation">:</span> <span class="token number">24</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">'editor-ueditor'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'d2p-ueditor'</span><span class="token punctuation">,</span> span<span class="token punctuation">:</span> <span class="token number">24</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">'editor-wang'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'d2p-wang-editor'</span><span class="token punctuation">,</span> span<span class="token punctuation">:</span> <span class="token number">24</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

<span class="token punctuation">}</span>
</code></pre></div><ul><li><p>相关组件：</p> <ul><li><a href="/d2-crud-plus/guide/extends/file-uploader.html">d2p-quill</a></li></ul></li> <li><p>示例：</p> <ul><li><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/editor" target="_blank" rel="noopener noreferrer">http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/editor<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <h2 id="elementui组件"><a href="#elementui组件" class="header-anchor">#</a> ElementUI组件</h2> <p>以下字段类型对应的组件为ElementUI的相应组件<br>
直接在component.props中配置ElementUI组件的属性即可实现定制化</p> <h3 id="日期时间选择"><a href="#日期时间选择" class="header-anchor">#</a> 日期时间选择</h3> <ul><li>type = datetime | date | time | daterange | datetimerange</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> daterangeFormatter<span class="token punctuation">,</span> datetimerangeFormatter<span class="token punctuation">,</span> shortcuts <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../functions'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  datetime<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'el-date-picker'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">'datetime'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'date-format'</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  date<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'el-date-picker'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'date-format'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> format<span class="token punctuation">:</span> <span class="token string">'YYYY-MM-DD'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  daterange<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      component<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        name<span class="token punctuation">:</span> <span class="token string">'el-date-picker'</span><span class="token punctuation">,</span>
        props<span class="token punctuation">:</span> <span class="token punctuation">{</span>
          type<span class="token punctuation">:</span> <span class="token string">'daterange'</span><span class="token punctuation">,</span>
          <span class="token string">'range-separator'</span><span class="token punctuation">:</span> <span class="token string">'至'</span><span class="token punctuation">,</span>
          <span class="token string">'start-placeholder'</span><span class="token punctuation">:</span> <span class="token string">'开始'</span><span class="token punctuation">,</span>
          <span class="token string">'end-placeholder'</span><span class="token punctuation">:</span> <span class="token string">'结束'</span><span class="token punctuation">,</span>
          <span class="token string">'picker-options'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> shortcuts<span class="token punctuation">:</span> shortcuts <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    formatter<span class="token punctuation">:</span> daterangeFormatter
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  datetimerange<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      component<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        name<span class="token punctuation">:</span> <span class="token string">'el-date-picker'</span><span class="token punctuation">,</span>
        props<span class="token punctuation">:</span> <span class="token punctuation">{</span>
          type<span class="token punctuation">:</span> <span class="token string">'datetimerange'</span><span class="token punctuation">,</span>
          <span class="token string">'range-separator'</span><span class="token punctuation">:</span> <span class="token string">'至'</span><span class="token punctuation">,</span>
          <span class="token string">'start-placeholder'</span><span class="token punctuation">:</span> <span class="token string">'开始'</span><span class="token punctuation">,</span>
          <span class="token string">'end-placeholder'</span><span class="token punctuation">:</span> <span class="token string">'结束'</span><span class="token punctuation">,</span>
          <span class="token string">'picker-options'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> shortcuts<span class="token punctuation">:</span> shortcuts <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    formatter<span class="token punctuation">:</span> datetimerangeFormatter
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  time<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'el-time-picker'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'date-format'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> format<span class="token punctuation">:</span> <span class="token string">'HH:mm:ss'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>相关组件：
<ul><li><a href="https://element.eleme.cn/#/zh-CN/component/date-picker" target="_blank" rel="noopener noreferrer">el-date-picker<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://element.eleme.cn/#/zh-CN/component/time-picker" target="_blank" rel="noopener noreferrer">el-time-picker<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="./components/date-format">date-format</a></li></ul></li> <li>示例：
<ul><li><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/date" target="_blank" rel="noopener noreferrer">http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/date<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <h2 id="其他el组件"><a href="#其他el组件" class="header-anchor">#</a> 其他el组件</h2> <ul><li>类型</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  button<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'d2p-button-input'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    disabled<span class="token punctuation">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  number<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'el-input-number'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    align<span class="token punctuation">:</span> <span class="token string">'center'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">switch</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'el-switch'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'el-switch'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    align<span class="token punctuation">:</span> <span class="token string">'center'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  slider<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'el-slider'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    align<span class="token punctuation">:</span> <span class="token string">'center'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  rate<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'el-rate'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    align<span class="token punctuation">:</span> <span class="token string">'center'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">'color-picker'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'el-color-picker'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    align<span class="token punctuation">:</span> <span class="token string">'center'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  transfer<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'el-transfer'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    align<span class="token punctuation">:</span> <span class="token string">'center'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  autocomplete<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> component<span class="token punctuation">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'el-autocomplete'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="数字输入"><a href="#数字输入" class="header-anchor">#</a> 数字输入</h3> <ul><li>type = number</li> <li>表单组件：
<ul><li><a href="https://element.eleme.cn/#/zh-CN/component/input-number" target="_blank" rel="noopener noreferrer">el-input-number<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li> <li>示例：
<ul><li><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el" target="_blank" rel="noopener noreferrer">http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <h3 id="开关"><a href="#开关" class="header-anchor">#</a> 开关</h3> <ul><li>type = switch</li> <li>相关组件：
<ul><li><a href="https://element.eleme.cn/#/zh-CN/component/switch" target="_blank" rel="noopener noreferrer">el-switch<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li> <li>示例：
<ul><li><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el" target="_blank" rel="noopener noreferrer">http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <h3 id="滑动条"><a href="#滑动条" class="header-anchor">#</a> 滑动条</h3> <ul><li>type = slider</li> <li>相关组件：
<ul><li><a href="https://element.eleme.cn/#/zh-CN/component/slider" target="_blank" rel="noopener noreferrer">el-slider<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li> <li>示例：
<ul><li><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el" target="_blank" rel="noopener noreferrer">http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <h3 id="评分"><a href="#评分" class="header-anchor">#</a> 评分</h3> <ul><li>type = rate</li> <li>相关组件：
<ul><li><a href="https://element.eleme.cn/#/zh-CN/component/rate" target="_blank" rel="noopener noreferrer">el-rate<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li> <li>示例：
<ul><li><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el" target="_blank" rel="noopener noreferrer">http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <h3 id="颜色"><a href="#颜色" class="header-anchor">#</a> 颜色</h3> <ul><li>type = color-picker</li> <li>相关组件：
<ul><li><a href="https://element.eleme.cn/#/zh-CN/component/color-picker" target="_blank" rel="noopener noreferrer">el-color-picker<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li> <li>示例：
<ul><li><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el" target="_blank" rel="noopener noreferrer">http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <h3 id="穿梭框"><a href="#穿梭框" class="header-anchor">#</a> 穿梭框</h3> <ul><li>type = transfer</li> <li>相关组件:
<ul><li><a href="https://element.eleme.cn/2.0/#/zh-CN/component/transfer" target="_blank" rel="noopener noreferrer">el-transfer<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li> <li>示例：
<ul><li><a href="http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el" target="_blank" rel="noopener noreferrer">http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <h2 id="slot自定义快捷字段类型"><a href="#slot自定义快捷字段类型" class="header-anchor">#</a> slot自定义快捷字段类型</h2> <ul><li>type = slot （表单以及行展示组件需要通过slot自定义）</li> <li>type = slot-all （表单、行展示组件、查询组件均需要通过slot自定义）</li> <li>type = slot-form （仅表单组件需要通过slot自定义）</li> <li>更多详情请看 <a href="./slot">slot自定义表单功能</a></li> <li>对应默认配置</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token string">'slot-all'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    search<span class="token punctuation">:</span> <span class="token punctuation">{</span> slot<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> slot<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    rowSlot<span class="token punctuation">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  slot<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> slot<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    rowSlot<span class="token punctuation">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">'slot-form'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">:</span> <span class="token punctuation">{</span> slot<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/greper/d2-crud-plus/edit/master//docs/guide/types.md" target="_blank" rel="noopener noreferrer">在 GitHub 上编辑此页</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2020/10/21 上午11:33:01</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/d2-crud-plus/guide/column-type.html" class="prev">
        字段类型
      </a></span> <span class="next"><a href="/d2-crud-plus/guide/custom-type.html">
        自定义字段类型
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/d2-crud-plus/assets/js/app.cf559687.js" defer></script><script src="/d2-crud-plus/assets/js/2.40e3d83c.js" defer></script><script src="/d2-crud-plus/assets/js/7.20165752.js" defer></script><script src="/d2-crud-plus/assets/js/99.74bab3f4.js" defer></script>
  </body>
</html>
